import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import axios from 'axios'


function Home({ num, add, init, list }) {
    // console.log(props)
    // const add = () => {
    //     props.dispatch({ type: "ADD_NUM" })
    // }

    useEffect(() => {

        // http://localhost:7001/user/login
        axios.post("/user/login", {
            user_name: "laoshiaaa",
            user_pwd: "Abc123!!!"
        }).then(res => {
            console.log(res)
        })
        init()
    }, [])
    return (
        <div>
            Home -- {num}
            <button onClick={add}>+++</button>
            <div>
                {/* { 
                    list.map(item => {
                        return <img key={item.goods_id} src={item.image_src} alt="" />
                    })
                } */}
            </div>
        </div>
    )
}


// connect()(组件)
// 映射 State  去  Props
const mapStateToProps = (state) => {
    const { num, list } = state
    return {
        num,
        list
    }
}

// 映射  dispatch  去  props
const mapDispatchToProps = (dispatch) => {
    // 默认参数为 dispatch
    return {
        add() {
            dispatch({ type: "ADD_NUM" })
        },
        init() {
            // dispatch({ type: "INIT_LIST" })
            // 原来dispatch   真
            // 现在的         假
            dispatch((next) => {
                axios.get("https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata").then(res => {
                    // next   为最初始的dipatch
                    next({ type: "INIT_LIST", list: res.data.message })
                })
            })
        }
    }
}

Home = connect(mapStateToProps, mapDispatchToProps)(Home)

export default Home
